<template>
  <div id="aboutWeb">
    <h1>关于本站</h1>
    <h3>简介</h3>
    <p>Bokey和Doki的小破站，建立于2023年7月15日。<br><br>创建博客主要目的是为了记录生活，学习分享</p>
    <h3>版权</h3>
    <p>本站只做分享无任何盈利目的，若本站内容有侵犯您的权益，请及时联系调整；本站内容纯属原创，特别声明除外</p>
    <h3>Bokey 联系</h3>
    <div id="showContact">
      <img src="https://bokey.oss-cn-shenzhen.aliyuncs.com/img/staticImage/bokey.png" alt="头像">
      <h2>Bokey</h2>
      <p class="motto">- Maintain an attitude -</p>
      <p class="motto">保持态度</p>
      <span class="contact" id="email" title="微博" @click="toQQEmail"></span>
      <span class="contact" id="facebook" title="facebook" @click="toFacebook"></span>
      <span class="contact" id="gitee" title="gitee" @click="toGitee"></span>
      <span class="contact" id="github" title="github" @click="toGitHub"></span>
    </div>
    <div></div>
    <div class="aboutMeLabe">
      <div class="labelBar" v-for="(item, index) in bokey" :key="index">
        <p v-for="i in item" :key="i">{{ i }}</p>
      </div>
    </div>
    <h3>Doki 联系</h3>
    <div id="showContact">
      <img src="https://bokey.oss-cn-shenzhen.aliyuncs.com/img/staticImage/doki.png" alt="头像">
      <h2>Doki</h2>
      <p class="motto">- Something that stays in your mind will someday spring up in your life -</p>
      <p class="motto">念念不忘，必有回响</p>
      <span class="contact" id="email" title="微博" @click="toQQEmail"></span>
      <span class="contact" id="facebook" title="facebook" @click="toFacebook"></span>
      <span class="contact" id="gitee" title="gitee" @click="toGitee"></span>
      <span class="contact" id="github" title="github" @click="toGitHub"></span>
    </div>
    <div class="aboutMeLabe">
      <div class="labelBar" v-for="(item, index) in doki" :key="index">
        <p v-for="i in item" :key="i">{{ i }}</p>
      </div>
    </div>
    <NotMore></NotMore>
    <FilingBar></FilingBar>
  </div>
</template>

<script>
import FilingBar from '@/components/reusable/FilingBar.vue';
import NotMore from '@/components/reusable/NotMore.vue';
export default {
  data() {
    return {
      bokey: [
        ['02年的绿色小老头', '代名词是intuition'],
        ['有自己的小世界', '爱狗人士', '艺术细胞百分百'],
        ['内心住着乌托邦', '行动派选手', '接受但不拘泥于平淡的生活'],
        ['世界是一本书想多读几页', '继续在向往中成长']
      ], // bokey数据
      doki: [
        ['01年蓝色小蛋糕', '向往随性与自由', '处处为他人着想', '情绪感知小天使'],
        ['美好世界的一抹晚霞', '螺狮粉狂热粉丝', '黑暗里的小太阳', '美女狂热爱好者', '细腻的治愈医师'],
        ['医者不自医的典型代表', '时常被他人影响和束缚却从不抱怨依然坚定地走自己的路', '珍惜日常活在当下的价值释放者'],
        ['寒冬的棉袄', '严于律己宽以待人', '从不吝啬给予', '外界的声音只是参考'],
      ], // doki数据
    }
  },
  components: {
    NotMore , FilingBar
  },
  methods: {
    toQQEmail() {
      window.open('https://weibo.com/u/6209660620')
    },
    toFacebook() {
      window.open('https://www.facebook.com/profile.php?id=100091260154943')
    },
    toGitee() {
      window.open('https://gitee.com/Bokey_lzh')
    },
    toGitHub() {
      window.open('https://github.com/Bokey76')
    }
  }
}
</script>

<style lang="scss" scoped>
.labelBar p {
  color: $color-main-text;
  border-radius: 20px;
  background-color: $color-background-assistant;
  display: inline-block;
  padding: 10px 20px;
  // cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 8px;
  transition: all .5s;
  margin: 0 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.labelBar {
  width: 80%;
  margin: 15px auto;
  display: flex;
  justify-content: center;
}

.labelBar p:hover {
  color: #fa5566;
}

.aboutMeLabe {
  margin-bottom: 30px;
}

//
h1 {
  color: $color-main-text;
  font-size: $font-size-large;
  font-weight: $font-weight-large;
  margin: 20px 60px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

p,
h3 {
  margin: 30px 60px;
}

h3 {
  background-color: $color-background-assistant;
  padding: 10px;
  color: $color-main-text;
  border-left: solid rgba(0, 0, 0, 0.7) 20px;
}

img {
  border-radius: 100%;
  display: block;
  border: 5px $color-text solid;
  margin: 0 auto;
  height: 180px;
  width: 180px;
}

h2 {
  font-size: $font-size-medium;
  text-align: center;
  margin: 10px auto;
  color: $color-main-text;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.motto {
  margin: 0 auto;
  text-align: center;
}

#showContact {
  position: relative;
}

.contact {
  position: absolute;
  opacity: 0;
  height: 60px;
  width: 60px;
  border-radius: 100%;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  transition: all .5s;
  background-color: $color-background-assistant;
  color: $color-main-text;
}

#email {
  top: 100px;
  left: 50%;
}

#facebook {
  top: 200px;
  left: 50%;
}

#gitee {
  top: 130px;
  right: 50%;
}

#github {
  top: 200px;
  right: 50%;
}

// 联系方式
#showContact:hover #email {
  top: 80px;
  left: 20%;
  opacity: 1;
}

#showContact:hover #facebook {
  top: 180px;
  left: 25%;
  opacity: 1;
}

#showContact:hover #gitee {
  top: 110px;
  right: 20%;
  opacity: 1;
}

#showContact:hover #github {
  top: 180px;
  right: 25%;
  opacity: 1;
}
</style>